<script setup>
import { ref, watch, computed, defineAsyncComponent } from 'vue';
import { useProblemsStore } from '../../stores/problems';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  open: { type: Boolean, default: false },
  height: { type: Number, default: 220 },
  minHeight: { type: Number, default: 140 },
  active: { type: String, default: '' }, // external control: 'terminal' | 'problems' | 'output'
});
const emit = defineEmits(['close', 'update:height', 'update:active', 'navigate']);
const { t } = useI18n();

const tab = ref('terminal'); // 'terminal' | 'problems' | 'output'
const problems = useProblemsStore();
const __problemsCount = computed(() => problems.items.length);

// lazy components
const TerminalPane = defineAsyncComponent(() => import('./TerminalPane.vue'));
const ProblemsPane = defineAsyncComponent(() => import('./ProblemsPane.vue'));
const OutputPane = defineAsyncComponent(() => import('./OutputPane.vue'));

// sync external active prop
if (props.active) tab.value = props.active;

watch(() => props.active, (v) => {
  if (v && v !== tab.value) tab.value = v;
});

watch(tab, (v) => emit('update:active', v));

const dragging = ref(false);
let startY = 0;
let startH = 0;

function onResizeDown(e) {
  dragging.value = true;
  startY = e.clientY;
  startH = props.height;
  document.body.style.cursor = 'ns-resize';
  document.body.style.userSelect = 'none';
  window.addEventListener('mousemove', onResizeMove, { passive: true });
  window.addEventListener('mouseup', onResizeUp);
}
function onResizeMove(e) {
  const dy = startY - e.clientY; // moving up => increase height
  const maxH = Math.floor((window.innerHeight || 800) * 0.8);
  let next = startH + dy;
  if (next < props.minHeight) next = props.minHeight;
  if (next > maxH) next = maxH;
  emit('update:height', next);
}
function onResizeUp() {
  dragging.value = false;
  document.body.style.cursor = '';
  document.body.style.userSelect = '';
  window.removeEventListener('mousemove', onResizeMove);
  window.removeEventListener('mouseup', onResizeUp);
}
</script>

<template>
  <div v-show="open" class="absolute left-0 right-0 bottom-0 pointer-events-auto border-t border-panel-border bg-panel-bg/80 backdrop-blur shadow-[0_-6px_20px_rgba(0,0,0,0.25)] overflow-hidden" :style="{ height: (height + 32) + 'px' }">
    <!-- resize handle -->
    <div class="h-1 cursor-ns-resize hover:bg-purple-500/60" @mousedown="onResizeDown"></div>
      <div class="h-8 flex items-center justify-between px-2 border-b border-panel-border text-[11px]">
      <div class="flex items-center gap-1">
        <button class="px-2 py-1 rounded hover:bg-subtle-bg" :class="tab==='terminal' ? 'bg-subtle-bg' : ''" @click="tab='terminal'">{{ t('app.bottom_terminal') }}</button>
        <button class="px-2 py-1 rounded hover:bg-subtle-bg" :class="tab==='problems' ? 'bg-subtle-bg' : ''" @click="tab='problems'">
          {{ t('app.bottom_problems') }}
          <span class="ml-1 rounded px-1 bg-panel-border text-[10px]" v-if="__problemsCount>0">{{ __problemsCount }}</span>
        </button>
        <button class="px-2 py-1 rounded hover:bg-subtle-bg" :class="tab==='output' ? 'bg-subtle-bg' : ''" @click="tab='output'">{{ t('app.bottom_output') }}</button>
      </div>
      <div class="flex items-center gap-1">
        <slot name="actions" />
        <button class="h-6 w-6 inline-flex items-center justify-center rounded hover:bg-subtle-bg" @click="$emit('close')">×</button>
      </div>
    </div>
    <div class="p-2 text-[12px] text-panel-fg min-h-0" :style="{ height: height + 'px' }">
      <TerminalPane v-if="tab==='terminal'" />
      <ProblemsPane v-else-if="tab==='problems'" @navigate="$emit('navigate', $event)" />
      <OutputPane v-else />
    </div>
  </div>
</template>


